<template>
  <div class="user-main">
    <van-cell-group>
      <van-cell title="个人信息" is-link size="large" to="/user/profile" />
      <van-cell
        title="学生/教师"
        size="large"
        :value="profile.type == 0 ? '学生' : '教师'"
      />
      <van-cell
        :title="profile.type == 0 ? '申请成为教师' : '修改教师信息'"
        size="large"
        is-link
        @click="showTForm"
      />
      <van-cell title="退出登录" size="large" is-link @click="logout" />
    </van-cell-group>

    <van-popup
      v-model="tshow"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-nav-bar title="信息审核" left-arrow @click-left="tshow = false" />
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.real_name"
          name="姓名"
          label="姓名"
          placeholder="输入您的真实姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="form.introduction"
          name="简介"
          rows="8"
          label="简介"
          maxlength="500"
          placeholder="请输入您的简介"
          show-word-limit
          :rules="[{ required: true, message: '请填写简介' }]"
          type="textarea"
        />
        <van-field
          v-model="form.education"
          name="学历"
          label="学历"
          placeholder="请填写您的学历"
          :rules="[{ required: true, message: '请填写您的学历' }]"
        />
        <van-field
          v-model="form.university"
          name="高校"
          label="高校"
          placeholder="请填写您的高校"
          :rules="[{ required: true, message: '请填写您的高校' }]"
        />
        <van-field
          v-model="form.major"
          name="专业"
          label="专业"
          placeholder="请填写您的专业"
          :rules="[{ required: true, message: '请填写您的专业' }]"
        />
        <van-field
          v-model="form.salary"
          name="价格/课时"
          label="价格/课时"
          placeholder="请填写您每课时的价格"
          :rules="[{ required: true, message: '请填写您每课时的价格' }]"
        />
        <van-field
          v-model="address"
          is-link
          readonly
          label="地区"
          placeholder="请选择您所在地区"
          @click="ashow = true"
        />
        <van-popup v-model="ashow" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择您所在地区"
            active-color="#1989fa"
            :field-names="fieldNames"
            :options="addresses"
            @close="ashow = false"
            @change="onChange"
            @finish="onFinish"
          />
        </van-popup>
        <div style="margin: 16px; margin-top: 30px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import {
  beTeacherAPI,
  provinceListAPI,
  cityListAPI,
  teacherAPI,
  updateTeacherAPI,
} from "@/api/userApi";
export default {
  data() {
    return {
      tshow: false,
      ashow: false,
      form: {
        introduction: "",
        salary: "",
        real_name: "",
        education: "",
        university: "",
        major: "",
        city_id: "",
        province_id: "",
      },
      address: "",
      addresses: [],
      cascaderValue: "",
      ismodify: false,
      fieldNames: {
        text: "name",
        value: "id",
        children: "subs",
      },
    };
  },
  computed: {
    ...mapState("user", ["profile"]),
  },
  methods: {
    ...mapMutations("user", ["cleanState"]),
    ...mapActions("user", ["initProfile"]),
    async onSubmit() {
      this.form.user_id = this.profile.id;
      if (!this.form.province_id || !this.form.city_id) {
        this.$notify({
          type: "warning",
          message: "请选择您的地址",
          duration: 2000,
        });
        return;
      }
      const { data: res } =
        this.profile.type == 0
          ? await beTeacherAPI(this.form)
          : await updateTeacherAPI(this.form);
      if (!res.message == "OK") {
        this.$notify({
          type: "warning",
          message: res.message,
          duration: 2000,
        });
        return;
      }
      this.form = {
        introduction: "",
        salary: "",
        real_name: "",
        education: "",
        university: "",
        major: "",
        city_id: "",
        province_id: "",
      };
      this.$notify({
        type: "success",
        message: this.profile.type == 0 ? "申请成功" : "修改成功",
        duration: 2000,
      });
      this.initProfile();
      this.tshow = false;
    },
    logout() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确认退出登录吗？",
          theme: "red-button",
        })
        .then(() => {
          this.cleanState();
          this.$router.push("/");
          this.$toast.success("退出登录");
        })
        .catch(() => {});
    },
    async initAddresses() {
      // console.log("地址列表");
      const { data: res } = await provinceListAPI();
      if (res.message == "OK") {
        this.addresses = res.province_list;
      }
    },
    async initTeacher() {
      const { data: res } = await teacherAPI(this.profile.teacher_id);
      this.form = res;
      this.address = this.form.province + "/" + this.form.city;
    },
    onFinish({ selectedOptions }) {
      this.ashow = false;
      this.address = selectedOptions.map((option) => option.name).join("/");
      this.form.city_id = selectedOptions[1].id;
      this.form.province_id = selectedOptions[0].id;
    },
    async onChange({ value, tabIndex }) {
      if (tabIndex == 1) return;
      const { data: res } = await cityListAPI(value);
      this.addresses.forEach((item) => {
        if (item.id == value) {
          item.subs = res.sub_data.subs;
        }
      });
    },
    showTForm() {
      if (this.profile.type == 1) {
        this.initTeacher();
      }
      this.tshow = true;
    },
  },
  created() {
    this.initAddresses();
  },
};
</script>

<style scoped></style>
